<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>成绩分布</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script th:src="@{/js/jquery-3.2.1.min.js}"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    // $.get().done(function(data){
    //     // 填入数据
    //     myChart.setOption({
    //         title: {
    //             text: '成绩分布'
    //         },
    //         legend: {
    //             data:['成绩']
    //         },
    //         xAxis: {
    //             data: data.categories
    //         },
    //         series: [{
    //             // 根据名字对应到相应的系列
    //             name: '成绩',
    //             data: data.data
    //         }]
    //     });
    // })

    var option = {
        title: {
            text: '成绩分布'
        },
        tooltip: {},
        legend: {
            data:['成绩']
        },
        xAxis: {
            data: ["不及格","及格","良好","优秀"]
        },
        yAxis: {},
        series: [{
            name: '成绩',
            type: 'bar',
            data: []
        }]
    };
    // 使用刚指定的配置项和数据显示图表。

    var count = [];
    $.ajax({
        url:"/score/jsonObj",
        // data:{},
        type:"post",
        dataType:"json",
        success:function(data){
            myChart.setOption({
                xAxis: {
                    data: ["不及格","及格","良好","优秀"]
                },
                series: [{
                    data: data
                }]
            })
        }
    })
    myChart.setOption(option);
</script>
</body>
</html>